<template>
    <div class="perStati">
        <div class="perStati-header">
            <x-header v-show="!isWeChar">
                <div slot="default" class="common__header--title">业绩统计</div>
                <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
            </x-header>
            <div class="perStati-margin-div"></div>
            <group class="perStati-details">
                <cell @click.native="goDetails()">
                    <span class="perStati_list--title" slot="after-title">&nbsp业绩明细</span>
                    <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/ico-list-order.png">
                </cell>
            </group>
            <div class="perStati-margin-div"></div>
            <div class="common__title perStati-type">
                <div class="common__title_btn ">
                    <checker v-model="statiType" radio-required default-item-class="common__item" selected-item-class="common__item-selected common__bacolor--DefaultTheme">
                        <checker-item class="grid-center" :value="item.key" v-for="(item, index) in statiTypeList" :key="index">{{item.value}}</checker-item>
                    </checker>
                </div>
            </div>
        </div>
        <div class="perStati-week" v-show="statiType=='day'">
            <grid :cols="7">
                <grid-item>
                    <span slot="label">六</span>
                </grid-item>
                <grid-item>
                    <span slot="label">日</span>
                </grid-item>
                <grid-item>
                    <span slot="label">一</span>
                </grid-item>
                <grid-item>
                    <span slot="label">二</span>
                </grid-item>
                <grid-item>
                    <span slot="label">三</span>
                </grid-item>
                <grid-item>
                    <span slot="label">四</span>
                </grid-item>
                <grid-item>
                    <span slot="label">五</span>
                </grid-item>
            </grid>
        </div>
        <div v-show="statiType=='day'">
            <transition name="slide-fade">
                <vue-scroller :style="scrollerStyle" v-show="showAnimate" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                    <div id="perform-stati_day">
                        <div class="statist-day" v-for="(item,index) in shop.displayDetail" v-show="isShowDay(item.year,item.month)" :key="index">
                            <group-title>{{item.year}}年{{item.month}}月</group-title>
                            <grid :cols="7">
                                <grid-item class="perSta-grid_item" v-for="(dayDate,dayIndex) in item.day" @click.native="goDetailStati('d',item.year,item.month,dayDate.day,dayDate.sumPrice)" :key="dayIndex">
                                    <span slot="label">
                                        <p class="statist-label_day">{{dayDate.day}}</p>
                                        <p class="statist-label_price">&nbsp{{dayDate.sumPrice}}&nbsp</p>
                                    </span>
                                </grid-item>
                            </grid>
                        </div>
                    </div>
                    <!-- <div style="background: #F0F0F0;height: 190px;"></div> -->
                </vue-scroller>
            </transition>
        </div>
        <transition name="slide-fade">
            <div v-show="statiType=='month'" id="perStati-month">
                <div class="statist-day" v-for="(item,index) in shop.displayMonthDetail" :key="index" v-show="fildeYear==''||fildeYear==item.year">
                    <group-title>{{item.year}}年</group-title>
                    <grid :cols="6">
                        <grid-item class="perSta-grid_item" v-for="(dayDate,dayIndex) in item.day" @click.native="goDetailStati('m',item.year,dayDate.dayNumber,'',dayDate.sumPrice)" :key="dayIndex">
                            <span slot="label">
                                <p class="statist-label_day">{{dayDate.day}}</p>
                                <p class="statist-label_price">&nbsp{{dayDate.sumPrice}}&nbsp</p>
                            </span>
                        </grid-item>
                    </grid>
                </div>
            </div>
        </transition>

        <transition name="slide-fade">
            <group v-show="statiType=='year'" class="perStati-details_year">
                <!-- <group-title>2017年11月</group-title> -->
                <cell v-for="(item,index) in shop.displayYear" @click.native="goDetailStati('y',item.days,'','',item.days)" :key="index">
                    <span class="perStati-year_title" slot="after-title">{{item.days}}&nbsp年</span>
                    <span class="perStati-year_price" slot="default">¥{{item.amount}}</span>
                </cell>

            </group>
        </transition>
    </div>
</template>

<script>
// import SharePage from "src/js/sharePage"; //引入微信分享js
import DateUtil from 'src/common/util/dateUtil';
import { XHeader, Group, Cell, CellBox, Badge, XInput, XDialog, XButton, XSwitch, Scroller, CheckerItem, Checker, Grid, GridItem, GroupTitle } from "vux";
import { mapState, mapActions } from "vuex";
import {
    Mutations, RouteUrl, Url_Key
} from "src/common/const";
import { RequestUrl } from 'src/common/url';
import vueScroller from "src/common/vueScroller/components/Scroller";
export default {
    components: { XInput, XHeader, Group, Cell, CellBox, Badge, XDialog, XButton, XSwitch, Scroller, CheckerItem, Checker, Grid, GridItem, GroupTitle, vueScroller },
    data() {
        return {
            done: "",
            statiTypeList: [
                {
                    key: "day",
                    value: "日"
                },
                {
                    key: "month",
                    value: "月"
                },
                {
                    key: "year",
                    value: "年"
                },
            ],
            statiType: "day",
            scrollerStyle: "position: fixed;padding-top: 205px;padding-bottom: 75px;z-index:0;",
            showAnimate: true,
            fildeYear: "",
            fildeMonth: "",
            isFilde: false,
            fildeMoYear: "",
            isMonthFilde: false,
        };
    },
    filters: {
        filData(val) {
        }
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",
        shop: "shop",
        isWeChar: "isWeChar",
        shareUuid: "shareUuid"
    }),
    watch: {
        statiType(cur, old) {
            let _this = this;
            if (cur == "day") {
                // this.scrollerStyle = "position: fixed;padding-top: 205px;padding-bottom: 75px;z-index:0;";
                this.$common.storeCommit(this, Mutations.VUE_SCROLLER_BTN, 190);
                // _this.queryStatiDataMonth("infinite");
            } else if (cur == "month") {
                //     this.scrollerStyle = "position: fixed;padding-top: 160px;padding-bottom: 75px;z-index:0;";
                //     this.$common.storeCommit(this, Mutations.VUE_SCROLLER_BTN, 190);
                if (!this.shop.isGetMonth) {
                    _this.getMonth();
                }
            } else {
                let data = {
                    userDto: this.user.userDto,
                    _this: this
                }
                this.$common.storeCommit(this, Mutations.GET_DETAILS_YEAR, data);
            }
            this.showAnimate = false;
            setTimeout(function () {
                _this.showAnimate = true;
            }, 100);

        }
    },
    methods: {
        getClass(val) {
            if (val == "-") {
                return "statist-label_dayfff";
            } else {
                return "statist-label_day";
            }
        },
        // initShare() {
        //     // refShareUUid
        //     let _this = this;
        //     let parmList = [];
        //     let uuid = "";
        //     uuid = this.shareUuid;
        //     let urlParm = {
        //         key: Url_Key.SHARE_UUID,
        //         value: uuid
        //     }
        //     parmList.push(urlParm);
        //     let shareUrl = RequestUrl.BASE_URL + RouteUrl.SHOP_INDEX + this.$common.setShareUrl(parmList);
        //     this.shopShareUrl = shareUrl;
        //     let shopIntroduct = this.shop.shopHeaderState.shopIntroduct;
        //     if (this.$common.isEmpty(shopIntroduct)) {
        //         shopIntroduct = "恒华出行宝";
        //     }

        //     let imgUrl = this.shop.shopHeaderState.header;
        //     if (imgUrl.indexOf("http://") < 0 && imgUrl.indexOf("https://") < 0) {
        //         //补全产品的图片路径
        //         imgUrl = RequestUrl.WEB_PATH + imgUrl;
        //     }
        //     if (imgUrl == "") {
        //         imgUrl = RequestUrl.WEB_PATH + "sticcxb/upload/assets/x3/logo.jpg"
        //     }

        //     // alert("shopUrl:" + shareUrl);
        //     let shareData = {
        //         _this: this,
        //         shareData: {
        //             title: this.shop.shopHeaderState.shopName,
        //             desc: shopIntroduct,
        //             imgUrl: imgUrl,
        //             url: shareUrl,
        //             _this: this,
        //             type: 3
        //         }
        //     };
        //     // document.title = this.shop.shopHeaderState.shopName;
        //     // share.shareInit(shareData);

        //     SharePage.weChatShare(shareData);

        // },
        // isShowMonth(val) {
        //     let bool = true;
        //     if (this.isFilde) {
        //         bool = this.statiType == 'month' && this.fildeYear == val;
        //     } else {
        //         bool = this.statiType == 'month';
        //     }
        //     return bool
        // },
        isShowDay(y, m) {
            // debugger
            // let filde = this.isMonthFilde;
            // debugger
            let boole = true;
            if (sessionStorage["IS_MONTH_FILDE"] == "true") {
                if (this.statiType == 'day' && y == this.fildeMoYear && m == this.fildeMonth) {
                    boole = true;
                } else {
                    boole = false;
                }
                // boole = this.statiType == 'day' && y == this.fildeMoYear && m == this.fildeMonth;
            } else {
                boole = true;
            }
            return boole;
        },
        goDetailStati(type, y, m, d, price) {
            if (!this.$common.isEmpty(price)) {
                let queryParam = "";
                let curShowMsg = "";
                if (type == 'd') {
                    if (d < 10) {
                        d = d + "";
                        d = "0" + d;
                    }
                    queryParam = y + "" + m + "" + d + "";
                    curShowMsg = y + "年" + m + "月" + d + "日";
                } else if (type == 'm') {
                    queryParam = y + "" + m + "";
                    curShowMsg = y + "年" + m + "月";
                    this.statiType = 'day';
                    this.fildeMoYear = y;
                    this.fildeMonth = m;
                    sessionStorage["IS_MONTH_FILDE"] = true;
                    // this.isMonthFilde = true;
                    return;
                } else if (type == 'y') {
                    queryParam = y + "";
                    curShowMsg = y + "年";
                    this.statiType = 'month';
                    this.fildeYear = y;
                    return;

                }
                let userCodeBs = "henghua";
                if (this.$common.isNotEmpty(this.user.userDto.userCodeBs)) {
                    userCodeBs = this.user.userDto.userCodeBs;
                }
                let queryData = {
                    userCode: this.user.userDto.userCode,
                    queryType: type,
                    queryParam: queryParam,
                    userCodeBs: userCodeBs,
                    TYPE: "FORM"
                }
                let query = {
                    type: 'query',
                    _this: this,
                    queryData: queryData,
                    curShowMsg: curShowMsg
                }
                this.$common.storeCommit(this, Mutations.YMD_PERFORMANCE_DETAILS, query);


            }
        },
        goDetails() {
            let query = {
                type: 'goUrl',
                _this: this,
                queryData: ""
            }
            this.$common.storeCommit(this, Mutations.YMD_PERFORMANCE_DETAILS, query);
            this.$common.goUrl(this, RouteUrl.PERFORMANCE_DETAILS);
        },
        goBack() {
            // this.$common.goBack(this);
            this.$common.goBackUrl(this, RouteUrl.SHOP_MANAGE);
        },
        // refreshMonth(done) {
        //     let _this = this;
        //     $("#perStati-month").fadeOut();
        //     setTimeout(() => {
        //         _this.queryStatiDataMonth("refresh", done);
        //         done();
        //     }, 200);
        //     $("#perStati-month").fadeIn();
        // },
        // infiniteMonth(done) {
        //     let _this = this;
        //     setTimeout(() => {
        //         _this.queryStatiDataMonth("infinite", done);
        //         done(_this.shop.monthIsEnd);
        //     }, 200);
        // },
        // queryStatiDataMonth(operation, done) {
        //     let query = {
        //         seleState: "day",
        //         operation: operation,
        //         _this: this,
        //         userDto: this.user.userDto
        //     }
        //     this.$common.storeCommit(this, Mutations.GET_DETAILS_MONTH, query);
        // },
        refresh(done) {
            // done();
            let _this = this;
            let doneValue = this.done;
            doneValue(false);
            $("#perform-stati_day").fadeOut();
            setTimeout(() => {
                if (sessionStorage["IS_MONTH_FILDE"] != "true") {
                    _this.queryStatiData("refresh", done);

                }
                done();
            }, 200);
            $("#perform-stati_day").fadeIn();
        },
        infinite(done) {
            let _this = this;
            this.done = done;
            setTimeout(() => {
                _this.queryStatiData("infinite", done);
                done(_this.shop.detailsIsEnd);
            }, 200);
        },
        commonInfinite(done) {
            // if (this.statiType == "day") {
            this.infinite(done);
            // } else if (this.statiType == "month") {
            //     this.infiniteMonth(done);
            // }
        },
        commonRefresh(done) {
            // sessionStorage["IS_MONTH_FILDE"] = false;
            // this.isMonthFilde = false;
            // if (this.statiType == "day") {
            // if (sessionStorage["IS_MONTH_FILDE"] != "true") {
            //     this.refresh(done);
            // }
            this.refresh(done);
            // } else if (this.statiType == "month") {
            //     this.refreshMonth(done);
            // }
        },
        queryStatiData(operation, done) {
            let query = {
                seleState: "day",
                operation: operation,
                _this: this,
                userDto: this.user.userDto
            }
            this.$common.storeCommit(this, Mutations.GET_DETAILS_DAY, query);
        },
        getMonth() {
            let query = {
                _this: this,
                userDto: this.user.userDto
            }
            this.$common.storeCommit(this, Mutations.GET_NEW_MONTH, query);
        }
    },

    mounted() {
        // alert(1);
        // let data = {
        //     seleState: "day",
        //     operation: "infinite"
        // }
        // this.$common.storeCommit(this, Mutations.GET_DETAILS_DAY, data);
        // this.$common.storeCommit(this, Mutations.GET_DETAILS_DAY, data);
        // let test = this.shop;
        // let user = this.user.userDto.registeDate;
        // let query = {
        //     TYPE: "FORM",
        //     userCode: "bs00000006",
        //     riskCode: "2724",
        //     queryParam: "201712"
        // }
        // this.$http.post(RequestUrl.PERFORMANCE_LIST, query)
        //     .then(function(res) {
        //     })
        // let test = {
        //     _this: this,
        //     operation: "infinite",
        //     riskCode: "all",
        //     type: "bs00000006",
        //     userCode: "bs00000006",
        //     registeDate: "1509897600000"
        // }
        // this.$common.storeCommit(this, Mutations.PERFORMANCE_DETAILS, test);
        sessionStorage["IS_MONTH_FILDE"] = false;
        let query = {
            _this: this,
            userCode: this.user.userDto.userCode,
            userCodeBs: this.user.userDto.userCodeBs,
        }

        this.$common.storeCommit(this, Mutations.PER_MONTH_COUNT, query);
        // this.$common.storeCommit(this, Mutations.IS_SHOW_VUE_SCROLLER_RE, true);
        if (this.isWeChar) {
            this.scrollerStyle = "position: fixed;padding-top: 160px;padding-bottom: 75px;z-index:0;";
        }
        this.$common.storeCommit(this, Mutations.VUE_SCROLLER_NO_MORE_DATA, "没有更多数据了");
        this.$common.storeCommit(this, Mutations.VUE_SCROLLER_BTN, 190);
        document.title = "业绩统计";
        this.$init.subPageInit(this);
        // this.initShare();

    }
}
</script>

<style lang="scss" scoped>
.perStati-details_year {
  .weui-cells__title {
    font-weight: bold;
    color: #000;
    padding-top: 8px;
    padding-bottom: 4px;
    margin-top: 0px;
  }
}

.perStati-year_price {
  color: #C8161D;
  font-size: 14px;
}

.perStati-year_title {
  font-weight: bold;
  color: #000;
  font-size: 14px;
}

.perStati-margin-div {
  height: 10px;
  width: 100%;
  background: #f0f0f0;
}

.perStati-details {
}

.perStati_list--title {
  font-size: 15px;
  padding-left: 5px;
}

.perStati-week {
  position: relative;
  width: 100%;
  z-index: 999;
  .weui-grids {
    .weui-grid {
      padding: 13px 10px;
    }
  }
}

.perSta-grid_item {
  padding: 5px 0px !important;
}

.statist-day {
  background: #fff; // padding: 5px 0px !important;
  .weui-cells__title {
    font-weight: bold;
    color: #000;
    padding-top: 8px;
    padding-bottom: 4px;
    margin-top: 0px;
  }
  .weui-grids {
    .weui-grid {
      border-top: 1px solid #d9d9d9;
      padding: 10px 10px;
    }
    .weui-grid:before {
      border-right: 1px solid #fff !important;
    }
    .weui-grid:after {
      border-bottom: 1px solid #fff;
    }
  }
}

.perStati-type {
  margin-top: 0px;
}

.statist-label_dayfff {
  font-size: 13px;
  color: #fff;
}
.statist-label_day {
  font-size: 13px;
  color: #000;
}
.statist-label_price {
  font-size: 12px;
  color: #C8161D;
}

.perStati-week {
  background: #fff;
  .weui-grids {
    .weui-grid {
      .weui-grid__label {
        span {
          color: #999999;
        }
      }
    }
    .weui-grid:before {
      border-right: 1px solid #fff !important;
    }
  }
}

.perStati-header {
  z-index: 999;
  position: relative;
  width: 100%;
}

.perStati-details {
  margin-top: -10px !important;
}
</style>
